<template>
	<view class="_outer">
		<view class="_label_top">
			<image class="_btn_top" src="../../static/img/kjg.png"></image>
			<label class="_lab_top">{{text}}</label>
		</view>
		<view v-for="(item,index) in getListData" :key='index'>
			<view class="_outer_btn_flex" @tap="tapMX(item.id,item.title)" v-if="index!=1">
				<view class="_flex_left">
					<image class="_btn" src="../../static/img/bg2.png"></image>
					<label class="_lab">{{item.title}}</label>
				</view>
				<view class="_flex_right">
					<label class="_lab">{{item.text_right}}</label>
					<mBtnCs class="_lbtn" :text="item.title+'占卜'"  showImg='1' isconcat='0' />
				</view>
			</view>
			<view class="_outer_btn_flex" @tap="tapMX(item.id,item.title)" v-if="index==1">
				<view class="_flex_right">
					<label class="_lab">{{item.text_right}}</label>
					<mBtnCs class="_lbtn_left" :text="item.title+'占卜'"  showImg='1' isconcat='0' />
				</view>
				<view class="_flex_left">
					<image class="_btn" src="../../static/img/bg2.png"></image>
					<label class="_lab">{{item.title}}</label>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import mBtnCs from '@/components/m-btn/m-btn-cs.vue'
	export default {
		components:{mBtnCs},
		props:{
			'btnData':{
				type:String,
				default:''
			},
			'listData':{
				type:Array,
				default:()=>{
					return [
						{
							'id':1,
							'title':'默认',
							'price':'价格',
							'discount':'折扣'
						}
					]
				}
			}
		},
		data() {
			return {
				text:'请选择要占卜的问题分类',
				aq:'情感',
				cy:'财富',
				sy:'事业',
				textRight:'每个人都想在事业上大展宏图，拥有更高的收入，你准备好了吗？',
				itext:'爱情未来流年占卜'
			};
		},
		computed:{
			getBtnData(){
				return this.btnData
			},
			getListData(){
				return this.listData
			},
			getbtntext(itext){
				return itext+'占卜'
			}
		},
		methods:{
			tapMX(_type,_rule){
				this.$emit('click',{
					'type':_type,
					'rule':_rule
				})
			}
		}
	}
</script>

<style lang="scss">
	._outer{
		height: 100%;
		position:relative;
		vertical-align: middle;
		width:100%;
		
		._label_top{
			display:flex;
			width:60%;
			top:25rpx;
			height:auto;
			margin:auto;
			position:relative;
			
			._lab_top{
				z-index:3;
				color:white;
				width:50%;
				text-align:center;
				justify-content:center;
				align-items:center;
				position:absolute;
				display:flex;
				margin-left:25%;
				margin-top:10%;

			}
			
			._btn_top{
				height: 185upx;
			}
		}
		
		._outer_btn_flex{
			height:219upx;
			display:flex;
			position:relative;
			width:98%;
			margin:auto;
			margin-top:55upx;

			
			
			._flex_left{
				width:40%;
				position:relative;
				display:flex;
				
				._btn{
					z-index:6;
					left:25rpx;
					width:225rpx;
					height:205rpx;
					margin:auto;
				}
				
				._lab{
					position:absolute;
					width:100%;
					text-align:center;
					height:225rpx;
					margin:auto;
					z-index:6;
					color:white;
					font-size:15pt;
					font-weight:bold;
					line-height:225rpx;
				}
			}
			
			._flex_right{
				position:relative;
				width:60%;
				position:flex;

				._lab{
					position:relative;
					width:95%;
					text-align:left;
					height:auto;
					margin:auto;
					z-index:6;
					color:#34FD02;
					font-size:8pt;
					top:18upx;
					position:relative;
					display:flex;
					color: white;
				}
				
				._lbtn{
					height:65rpx;
					position:relative;
					display:flex;
					width:425rpx;
					top:55rpx;
					margin-left:30px;
				}
				
				._lbtn_left{
					height:65rpx;
					position:relative;
					display:flex;
					width:425rpx;
					top:55rpx;
					margin-left: -35upx;
				}
			}
			
			
		}
	}
</style>
